<template>
    
  <div class="loginbody">
    <el-row :gutter="20">
      <el-col :span="8" :push="15">
        <div class="grid-content bg-purple" style="margin-top:200px;">

     
    <div class="logindata">
      <div class="logintext">
        <h2>欢迎登录宿舍管理系统</h2>
      </div>
      <div class="formdata">
        <el-form ref="loginformref" :model="loginform" >
          <el-form-item prop="username">
            <el-input
              v-model="loginform.username"
              clearable
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginform.password"
              clearable
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
            <el-form-item style="padding-left:100px;margin-top:60px;">
                <el-button type="primary" v-on:click="login" >确定登录</el-button>
                <el-button type="primary" native-type="reset">重新输入</el-button>
              </el-form-item>
         

        </el-form>
      </div>
     
     
    </div>

    </div>

    </el-col>

    </el-row>
  </div>
</template>

<script>


export default {
  name: "login",
  
  
  data() {
    return {
      loginform: {
         username: "admin",
         password: "admin"
       
      },
     
      
    };
  },
          methods: {
                open4() {
                        this.$message({message:'账号或密码输入错误，请重新输入。'
                        ,duration:5000
                        ,offset:30
                        ,showClose: true
                        ,type:'error'})
                        
                      },

            login() {
                   let  params  =  new URLSearchParams();
                   params.append("username", this.loginform.username);
                    params.append("password", this.loginform.password);


                this.$axios.post('user/login',params)
                    .then(successResponse => {
                        if (successResponse.data.tag) {

                            //将登录的用户数据存储到浏览器                     
                            // this.$store.dispatch(actions.js层的函数名,参数),  来调用方法
         	                	this.$store.dispatch("login1",successResponse.data.data);
                            

                         //提示登录成功
                        this.$message({message:'登录成功。'
                                                ,duration:5000
                                                ,offset:150
                                                ,showClose: true
                                                ,type:'success'});

                            this.$router.replace({path: '/main'})
                        }else{
                           console.log(successResponse.data.message);
                          this.loginform.username="";
                          this.loginform.password="";
                          this.open4();

                        }
                    })
                    .catch(failResponse => {

                    })
            },
            
    },

};
</script>

<style scoped>
.loginbody {
  widows: 100%;
  height:100vh;
  background-image: url("../assets/login1.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: hidden;
  background-repeat: no-repeat;
  
}

.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.logindata {
  width: 400px;
  height: 300px;
  transform: translate(-50%);
  margin-left: 50%;
}



.butt {
  margin-top: 10px;
  text-align: center;
}

.shou {
  cursor: pointer;
  color: #606266;
}


</style>

